<!--四性检测-->
<template>
  <div class="tab1">
    <left-tree
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData">
    </left-tree>
    <div class="tab1-right" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <el-table
        :data="tab1TableData"
        highlight-current-row
        border
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <slot v-for="(item,index) in tab1Columns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
      </el-table>
    </div>
  </div>
</template>

<script>
import { LeftTree } from '@/components'
export default {
  name: '',
  components: {
    LeftTree
  },
  data () {
    return {
      isShowLeftTree: false,
      treeData: [
        {
          title: '2018',
          key: '1'
        },
        {
          title: '2019',
          key: '2'
        },
        {
          title: '2020',
          key: '3',
          children: [
            {
              title: '1月',
              key: '4'
            },
            {
              title: '2月',
              key: '5'
            },
            {
              title: '3月',
              key: '6'
            },
            {
              title: '4月',
              key: '7'
            },
            {
              title: '5月',
              key: '8'
            },
            {
              title: '6月',
              key: '9'
            }
          ]
        }
      ],
      tab1TableData: [
        {
          Real: '电子文件来源真实性检测',
          Complete: '电子文件数据总量检测',
          Usable: '电子文件元数据可用性检测',
          Safe: '归档信息包病毒检测'
        },
        {
          Real: '电子文件元数据真实性检测',
          Complete: '电子文件元数据完整性检测',
          Usable: '电子文件内容可用性检测',
          Safe: '归档载体安全性检测'
        },
        {
          Real: '电子文件内容真实性检测',
          Complete: '电子文件内容完整性检测',
          Usable: '电子文件软硬件环境检测',
          Safe: '归档过程安全性检测'
        }
      ],
      tab1Columns: [
        {
          title: '真实性检测内容',
          field: 'Real'
        },
        {
          title: '完整性检测内容',
          field: 'Complete'
        },
        {
          title: '可用性检测内容',
          field: 'Usable'
        },
        {
          title: '安全性检测内容',
          field: 'Safe'
        }
      ]
    }
  },
  created () {},
  mounted () {},
  methods: {
  }
}
</script>

<style lang="less" scoped>
.tab1 {
  width: 100%;
  height: 100%;
  padding: 10px;
  .tab1-right {
    float: left;
    width: 82%;
    height: 100%;
    transition: all 0.2s;
  }
}
</style>
